<template>
	<div class="pages">
		<div class="flex">
			<div style="width:360px;padding:0 20px;">
				<div class="left">
					<div class="text-center ">
						<div class="block change" style="padding: 40px 0;border-radius: 10px;">
							<img style="width: 80px; height: 80px" :src="carClassify.src"></img>
							<div>{{carClassify.name}}</div>
						</div>
					</div>
				</div>
				<div class=" " style="color: #fff;">
					<div @click="$router.push('/recode?status=1')"
						style="margin-top: 40px; padding: 30px ; text-align: center; background: linear-gradient(180deg, #3CB4FE 0%, #328DFB 100%);border-radius: 10px 10px 10px 10px;">
						<img src="../../assets/images/misIcon.png" style="width: 30px;height: 30px;" />
						<div>错题汇总</div>
					</div>
					<div @click="dialogVisible=true"
						style="margin-top: 40px; padding: 30px ;text-align: center;background: linear-gradient(180deg, #F4D40E 0%, #EFB608 100%);border-radius: 10px 10px 10px 10px;">
						<img src="../../assets/images/moniIcon.png" style="width: 30px;height: 30px;" />
						<div>模拟考试</div>
					</div>
					<div @click="$router.push('/recode')"
						style="margin-top: 40px; padding: 30px ;text-align: center;background: linear-gradient(180deg, #FFA067 0%, #FF7254 100%);border-radius: 10px 10px 10px 10px;">
						<img src="../../assets/images/recordIcon.png" style="width: 30px;height: 30px;" />
						<div>成绩记录</div>
					</div>
					<div @click="goCollect"
						style="margin-top: 40px; padding: 30px ;text-align: center;background: linear-gradient(180deg, #ff8789 0%, #ff6769 100%);border-radius: 10px 10px 10px 10px;">
						<img src="../../assets/images/moniIcon.png" style="width: 30px;height:30px;" />
						<div>收藏</div>
					</div>
				</div>
			</div>


			<div class=" carType">
				<div class="navClassify">
					<div class="content" style="height: 88px;line-height: 88px;color: #fff;">
						<ul class="flex flex-row-between">
							<li @click="selectSubject(index)" :class="subject==index?'change':''"
								v-for="(item,index) in navClassify" :key="index" class="navClassifyBlock">
								{{item.name}}
							</li>
						</ul>
					</div>
				</div>
				<div class="" style="padding: 20px;width:1400px">
					<div class="flex  " style="overflow:auto;height:700px;overflow-y:scroll;overflow-x: hidden;">
						<div v-for="(item,index) in list" :key="index" class="">
							<!-- <div style="margin: 20px 0;font-weight: bold;font-size: 26px;">
								{{item.name}}
							</div> -->
							<div @click="go(item1,'精选题库')" style="width: 350px; padding: 5px 10px ;background: #EBF1FF;border-radius: 10px
								;margin-bottom: 20px;margin-right: 50px;" v-for="(item1,index1) in item.paper" :key="index1" class="flex  ">
								<div style="margin: auto;" class="flex flex-col-center">
									<img src="../../assets/images/cateIcon.png" style="width: 47px;height:47px;" />
									<span style="color: #333333;font-size: 24px;">{{item1.name}}</span>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>


			<el-dialog :visible.sync="dialogVisible" :show-close="false" class="headerlog">
				<div slot='title'
					style="font-weight: bold;font-size: 25px; background: #5966C6;padding: 20px;text-align: center;color: #fff;">
					奇顺-考试系统
				</div>

				<div style="margin-top: 20px;">
					<el-row type="flex">
						<el-col :span="10"
							style="text-indent: 20px; line-height: 35px; font-weight: bold;font-size:22px; border: 1px solid #333;padding: 20px;color: #375EE7;">
							<div style="">1.遵守考场纪律，服从监考人员指挥。</div>
							<div>2.进入考场，手机，拷机关机。禁止抽烟，禁止吃零食</div>
							<div>3.未经工作人员允许.考生禁止随意出入考场</div>
							<div>4.考场内禁止大声喧哗，禁止随意走动。</div>
							<div>5.考试中认真答题，不准交投接耳。</div>
							<div>6.考试不准冒名顶替，不准弄虚作假。</div>
							<div>7.注意考场卫生，禁止随意吐痰，禁止乱扔纸屑。</div>
						</el-col>
						<el-col :span="14 "
							style="background: linear-gradient(to bottom,#7A9ABB,#9DADB2);padding: 40px;">
							<div>
								<div style="text-align: center;font-weight: bold;font-size: 25px;color: #333;">
									奇顺无纸化考场【01】号考台</div>

								<div
									style="color: red;font-weight: bold;font-size: 20px;margin: 40px 0;line-height: 50px;">
									<div>身份证号：0123456</div>
									<div>考生姓名：奇顺</div>
									<div>点击[确认]按钮开始考试！</div>
								</div>

								<div style="display: flex;justify-content: flex-end;">
									<el-button plain type="info" @click="goExam('模拟考试')">确定</el-button>
								</div>


							</div>
						</el-col>
					</el-row>
				</div>
				<!-- <div class="text-center">
					<div class="u-font-20 u-font-weight ">
						模拟考试不能修改答案，每做一题，系统 </br>自动计算错误题数，及格标准为90分
					</div>

					<div class="u-font-18  " style="color: #008EFF;margin-top: 40px;">
						点击确定开始考试
					</div>
				</div> -->
				<!-- <span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible=false">返回</el-button>
					<el-button type="primary" @click="goExam('模拟考试')">确定</el-button>
				</span> -->
			</el-dialog>



		</div>


	</div>
</template>

<script>
	import {

		mapState,

		mapMutations

	} from 'vuex';

	export default {
		data() {
			return {
				dialogVisible: false,
				navClassify: [{
					name: "科目一",
					id: 1
				}, {
					name: "科目四",
					id: 4
				}, {
					name: "注销恢复",
					id: 6
				}, {
					name: "满分学习",
					id: 5
				}],
				subject: 0,
				table: [],
				car_type: '',


				carClassify: {},

				list: [],


				arr1: []
			}
		},
		computed: {
			...mapState(['carTypeParams']),
		},
		methods: {
			go(item, txt) {
				this.$Go('case', {
					id: item.id,
					txt: txt,
					car: this.carTypeParams.name,
					carId: this.car_type + 1,
					subject: item.name,
					subjectId: this.navClassify[this.subject].id,
				});
			},
			goCollect(){
				this.$Go('case', {
					txt: '收藏库',
				});
			},
			gomis() {
				this.$Go('case', {
					txt: '错题库',
				});
			},
			goExam(txt) {
				this.$Go('case', {
					txt: txt,
					car: this.carTypeParams.name,
					carId: this.car_type + 1,
					subject: this.navClassify[this.subject].name,
					subjectId: this.navClassify[this.subject].id,
				}, );
				this.dialogVisible = false
			},
			selectSubject(e) {
				this.subject = e;
				this.getClassify()
			},
			selectCar(e) {
				this.car_type = e;
				this.getClassify()
			},
			getClassify() {
				let subject = this.subject == 0 ? 1 : this.subject == 1 ? 4 : this.subject == 2 ? 6 : this.subject == 3 ?
					5 : '';
				this.axios.post("/index/cate", {
					vip: 1,
					subject: subject,
					car_type: this.car_type + 1,
				}).then(res => {

					this.list = res;
				}).catch(error => {

				})
			},

			// let aA =this.one(a)
			// one(arr) {
			// 	let newArr = [];
			// 	function two(arr){
			// 		arr.forEach(item => {
			// 			if(item.childList.length){
			// 				two(item.childList)
			// 				newArr.push(item)
			// 			}else{
			// 				newArr.push(item)
			// 			}
			// 		})
			// 	}
			// 	two(arr)
			// 	return newArr;
			// },
		},
		created() {
			console.log(111)
			this.car_type = this.carTypeParams.car_type
			this.carClassify = this.carTypeParams.carObject
			this.getClassify()

		},


	}
</script>

<style>

</style>
<style scoped lang="scss">
	.headerlog {
		/deep/ .el-dialog__header {
			padding: 0 !important;
		}

		/deep/ .el-dialog__body {
			padding: 0 !important;
		}
	}

	.left {}

	.navClassify {
		background: linear-gradient(180deg, #3CB4FE 0%, #328DFB 100%);

		.navClassifyBlock {
			width: 200px;
			height: 88px;
			text-align: center;
			font-size: 23px;
		}

		.change {
			background: #006AA2;
			font-weight: bold;
			transition: all 0.3s;

		}
	}

	.left {
		.change {
			background: #EBF1FF;

			transition: all 0.3s;
			color: #3CB4FE;

		}
	}


	.carType {
		.block {
			width: 100%;
		}


	}
</style>
